<script setup>
import { ref, reactive, onMounted } from 'vue';
import { reqNoticeNote, reqPublicNotice } from '@/api/teacher/record/notice';
import { showFailToast, showSuccessToast } from 'vant';
import { useTeacherStore } from '@/stores/modules/teacherStore';
import { useRouter } from 'vue-router';

const teacherStore = useTeacherStore();

const router = useRouter();

// 表单内容
const noticeForm = reactive({ title: '', content: '' });

// 表单规则
const rules = reactive({
    title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
    content: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
});

// 表单ref
const formRef = ref();

// 公告记录列表
const noticeNoteList = ref([]);

// 获取公告记录
const getNoticeNote = async () => {
    try {
        const result = await reqNoticeNote(teacherStore.teacherId);

        if (result.status == 200) {
            noticeNoteList.value.push(...result.dataList);
        } else {
            throw new Error(result.statusText);
        }
    } catch (e) {
        showFailToast(e.message);
    }
};

// 发布通知
const publicNotice = async formEl => {
    if (!formEl) return;
    await formEl.validate(async valid => {
        if (valid) {
            // 验证成功
            try {
                const result = await reqPublicNotice(
                    { title: noticeForm.title, main: noticeForm.content },
                    teacherStore.teacherId
                );

                if (result.status == 200) {
                    showSuccessToast(result.statusText);

                    noticeForm.title = '';
                    noticeForm.content = '';

                    noticeNoteList.value = [];

                    getNoticeNote();
                } else {
                    throw new Error(result?.statusText);
                }
            } catch (e) {
                showFailToast(e?.message || '发布失败');
            }
        } else {
            // 验证失败
            return;
        }
    });
};

// 跳转到详情页面
const gotoDetail = id => {
    router.push({ name: 'noticeDetail', query: { id } });
};

onMounted(() => {
    getNoticeNote();
});
</script>

<template>
    <div class="container">
        <header class="header">发布消息通知</header>
        <section class="form-wrapper">
            <el-form
                ref="formRef"
                :model="noticeForm"
                :rules="rules"
                status-icon
            >
                <el-form-item class="form-item" prop="title">
                    <el-input
                        v-model="noticeForm.title"
                        placeholder="单行输入"
                        size="large"
                    >
                        <template #prepend>标题: </template>
                    </el-input>
                </el-form-item>
                <el-form-item class="form-item" prop="content">
                    <el-input
                        v-model="noticeForm.content"
                        type="textarea"
                        placeholder="您想要发布的通知......"
                        resize="none"
                        input-style="height: 130rem"
                    ></el-input>
                </el-form-item>
                <div class="receiver">接收人: 全班同学</div>
                <div class="notice-wrapper">
                    <el-button type="primary" @click="publicNotice(formRef)">
                        发布通知
                    </el-button>
                </div>
            </el-form>
        </section>
        <section class="record">
            <h3 class="record__title">我的发布记录</h3>
            <ul>
                <li
                    class="record__item"
                    v-for="notice in noticeNoteList"
                    :key="notice.id"
                    @click="gotoDetail(notice.id)"
                >
                    <div class="note-wrapper">
                        <h5 class="note__heading">{{ notice.title }}</h5>
                        <div class="reader-number">
                            {{ notice.stRead }}人已读
                        </div>
                    </div>
                    <div class="note__time">{{ notice.createTime }}</div>
                </li>
            </ul>
        </section>
    </div>
</template>

<style scoped lang="scss">
.container {
    font-size: 14rem;
    background-color: rgb(247, 247, 247);
}

.header {
    color: #fff;
    font-size: 15rem;
    height: 40rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(84, 153, 199);
}

.form-wrapper {
    padding: 10rem 20rem;
    margin-top: 10rem;
    background-color: rgb(247, 247, 247);

    .form-item {
        margin-bottom: 20rem;
    }

    .notice-wrapper {
        display: flex;
        justify-content: flex-end;
        margin-top: 10rem;
    }
}

.record {
    padding: 10rem 20rem;
    font-size: 15rem;

    &__title {
        font-weight: bold;
        padding-bottom: 10rem;
        border-bottom: 1px solid #ccc;
    }

    &__item {
        margin-top: 10rem;
        padding-bottom: 10rem;
        border-bottom: 1px solid #ccc;
    }

    .note-wrapper {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rem;
    }

    .note__heading {
        font-weight: bold;
        color: #666;
        font-size: 15rem;
    }

    .reader-number {
        font-size: 14rem;
        color: rgb(31, 167, 248);
    }

    .note__time {
        font-size: 13rem;
    }
}
</style>
